<!-- 选择教练 -->
<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	// props
	const props = defineProps({
		show: {
			type: Boolean,
			required: true
		},
		data: {
			type: Array,
			default: () => []
		}
	})
	// emits
	const emit = defineEmits(['close', 'confirm'])

	// 数据
	const data = reactive({
		couponList: [1, 2, 3],
		value: ''
	})

	// 关闭弹窗
	const close = () => {
		reset()
		emit('close')
	}
	// 还原初始数据
	const reset = () => {
		data.value = ''
	}
	// 确认选择
	const sure = () => {
		emit('confirm')
	}
</script>
<script>
	export default {
		options: {
			styleIsolation: "shared"
		},
	};
</script>
<template>
	<!-- 弹窗-选择教练 -->
	<up-popup :show="props.show" :closeable="true" @close="close" :round="10" bgColor="#FFFFFF">
		<view class="Coupon-module">
			<view class="title">
				<text>选择教练</text>
			</view>
			<view class="cnt">
				<scroll-view scroll-y="true" style="height: 920rpx;">
					<view class="list">
						<up-radio-group v-model="data.value" iconPlacement="right" placement="column"
							inactiveColor="#D9D9D9" activeColor="#25D62E">
							<view v-for="item in 5" :key="item" class="item"
								:class="data.value == item ? 'active' : ''">
								<view class="content-box">
									<view class="left">
										<image style="width: 144rpx;height: 150rpx;"
											src="https://image.nanjingtouyang.com/jiaoliantupian/%E5%BC%A0%E4%BC%9F/%E5%A4%B4%E5%83%8F.png"
											mode="scaleToFill" />
									</view>
									<view class="info">
										<view class="name">王林</view>
										<view class="center">
											<view class="rate">
												<u-icon name="star-fill" color="#FFB13B;"></u-icon>
												<text>4.9</text>
											</view>
											<view class="tags">
												<text class="card">增肌</text>
												<text class="card">减脂</text>
												<text class="card">拉伸</text>
												<text class="card">肩颈康复</text>
											</view>
										</view>
										<view class="other-box">
											<view class="describe">
												“<text class="up-line-1">身经百炼，肌肉倍健，健身让...</text>”
											</view>
											<view class="price-box">
												<view class="price">
													<text>￥190</text>
												</view>
												<view class="unit">/次</view>
											</view>
										</view>
									</view>
									<view class="radio-box">
										<up-radio :label="''" :name="item">
										</up-radio>
									</view>
								</view>
							</view>
						</up-radio-group>
					</view>
				</scroll-view>
			</view>
			<!-- 底部栏 -->
			<view class="bottom-bar">
				<view class="content">
					<up-button class="sure-btn" text="确认选择" type="primary" shape="circle" @click="sure"></up-button>

				</view>
			</view>
		</view>
	</up-popup>
</template>

<style lang="scss" scoped>
	.Coupon-module {
		padding-bottom: 128rpx;
		// background-color: #F6F6F6;

		// 标题
		& .title {
			margin-top: 30rpx;
			font-weight: 500;
			font-size: 32rpx;

			color: #303133;
			text-align: center;
		}

		// 内容
		& .cnt {
			box-sizing: border-box;
			// padding: 38rpx 44rpx;
			margin-top: 32rpx;

			& .list {
				box-sizing: border-box;
				padding: 38rpx 44rpx;

				& .item {
					margin-bottom: 20rpx;

					&.active {
						background: linear-gradient(180deg, #26BC2E, #2B7330);
						border-radius: 20rpx;
						padding: 4rpx;

						&>.content-box {
							border: none;
							background: linear-gradient(180deg, #E9F9EA 0%, #FFFFFF 100%);
						}
					}

					&>.content-box {
						position: relative;
						display: flex;
						align-items: center;
						padding: 16rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						width: 662rpx;
						border-radius: 16rpx;
						border: 2rpx solid #D9D9D9;

						& .info {
							margin-left: 16rpx;
							// display: flex;

							& .name {
								font-weight: 500;
								font-size: 28rpx;
								color: #303133;
							}

							& .center {
								display: flex;
								align-items: center;
								margin-top: 4rpx;

								& .rate {
									display: flex;
									align-items: center;

									& text {
										margin-left: 8rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 28rpx;
										color: #303133;
										line-height: 33rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}

								& .tags {
									display: flex;
									align-items: center;

									& .card {
										padding: 4rpx 12rpx;
										margin-left: 12rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 18rpx;
										color: #838385;
										line-height: 21rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										background: #F5F7F6;
										border-radius: 4rpx 4rpx 4rpx 4rpx;
									}
								}
							}

							& .other-box {
								display: flex;
								align-items: flex-end;
								margin-top: 20rpx;

								& .describe {
									display: flex;
									font-weight: 400;
									font-size: 20rpx;
									color: #808080;
									width: 298rpx;
								}

								& .price-box {
									display: flex;
									align-items: flex-end;
									justify-content: flex-end;
									margin-left: 36rpx;

									& .price {
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 36rpx;
										line-height: 36rpx;
										background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
										background-clip: text;
										-webkit-background-clip: text;
										-webkit-text-fill-color: transparent;
									}

									& .unit {
										margin-left: 2rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 20rpx;
										color: #838385;
										line-height: 23rpx;
									}
								}
							}
						}

						& .radio-box {
							width: 36rpx;
							height: 36rpx;
							position: absolute;
							right: -10rpx;
							top: -10rpx;

							&::v-deep .u-radio {
								margin: 0;
							}
						}
					}
				}
			}
		}

		// 底部栏
		& .bottom-bar {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #E9E9EB;

			&::v-deep .content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 12rpx 40rpx;

				& .u-button {
					height: 88rpx;
					width: 620rpx;
					font-weight: 500;
					font-size: 32rpx;
					border-radius: 112rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					background: #303133;
				}
			}
		}

		// 赠送弹窗文字
		& .sure-give-modal {
			margin-top: 20rpx;

			& view {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}
</style>